@layout("/common/_container.html",{js:["/assets/nanSellBanner/list.js"],css:["/assets/common/module/formSelects/formSelects-v4.css"]}){

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加Banner</button>
                            </div>
                        </div>
                    </div>
                    <table class="layui-table" id="nanSellBannerTable" lay-filter="nanSellBannerTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script type="text/html" id="imageTpl">
    {{# if(d.imageUrl) { }}
    <img src="{{ Feng.cdn + d.imageUrl }}" style="height:60px;" onerror="this.src='{{ Feng.ctxPath }}/img/default.png'">
    {{# } }}
</script>

<script type="text/html" id="linkTypeTpl">
    {{# if(d.linkType == 1) { }}
    <span class="layui-badge layui-bg-green">内链</span>
    {{# } else if(d.linkType == 2) { }}
    <span class="layui-badge layui-bg-blue">外链</span>
    {{# } else if(d.linkType == 3) { }}
    <span class="layui-badge layui-bg-orange">普通商品</span>
    {{# } else if(d.linkType == 4) { }}
    <span class="layui-badge layui-bg-cyan">免费商品</span>
    {{# } }}
</script>

<!-- 添加/编辑Banner的弹窗 -->
<div id="bannerDlg" style="display:none;padding:20px;">
    <form class="layui-form" id="bannerForm" lay-filter="bannerForm">
        <input type="hidden" name="id" id="bannerId">

        <div class="layui-form-item">
            <label class="layui-form-label">链接类型</label>
            <div class="layui-input-block">
                <select name="linkType" id="linkType" lay-filter="linkType" required lay-verify="required">
                    <option value="">请选择链接类型</option>
                    <option value="1">内链</option>
                    <option value="2">外链</option>
                    <option value="3">普通商品</option>
                    <option value="4">免费商品</option>
                </select>
            </div>
        </div>

        <!-- 商品选择区域 -->
        <div class="layui-form-item" id="productSelectArea" style="display:none;">
            <label class="layui-form-label">选择商品</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-sm" id="btnSelectProduct">
                    <i class="layui-icon">&#xe615;</i>选择商品
                </button>
                <input type="hidden" name="productId" id="productId">
                <span id="selectedProductName" style="margin-left:10px;color:#666;"></span>
            </div>
        </div>

        <div class="layui-form-item" id="productNameArea" style="display:none;">
            <label class="layui-form-label">产品名称</label>
            <div class="layui-input-block">
                <input type="text" name="productName" id="productName" placeholder="请输入产品名称" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="linkUrlArea">
            <label class="layui-form-label">Banner链接</label>
            <div class="layui-input-block">
                <input type="text" name="linkUrl" id="linkUrl" placeholder="请输入Banner链接" class="layui-input">
                <div class="nan-tips">备注：外站链接需包含https://或http://前缀</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">Banner图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadImage">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div id="imagePreview" style="margin-top:10px;"></div>
                <input type="hidden" name="imageUrl" id="imageUrl" required lay-verify="required">
                <div class="nan-tips" id="imageSizeTip">备注：图片尺寸：693px × 259px</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="0" min="0" class="layui-input" placeholder="数字越大越靠前">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="saveBanner">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
@}
